import React, { useEffect, useState } from "react";
import { Tabs } from "antd";
import axios from "./api/axios";
import "./App.css";

// 定义接口数据类型
interface Tablist {
  key: number;
  label: string;
  children: Array<{ word: string }>;
}

const App: React.FC = () => {
  //定义列表数据的
  const [newList, setNewList] = useState([]);

  //请求接口获取列表数据
  const GetList = async () => {
    const res = await axios.get("/mock/tab");
    const { data } = res.data;
    setNewList(data);
  };

  useEffect(() => {
    GetList();
  }, []);

  const onChange = (key: string) => {
    console.log(key);
  };

  return (
    <div className="tabbox">
      <Tabs defaultActiveKey="1" onChange={onChange}>
        {newList.map((item: Tablist, ind) => (
          <Tabs.TabPane tab={item.label} key={ind}>
            {item.children.map((it, i) => (
              <p key={i}>
                <span>{i < 3 ? i + 1 : ""}</span>
                {it.word}
              </p>
            ))}
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
  );
};

export default App;
